<style lang="scss" scoped>

.bigBox {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    margin-bottom: 5px; // 10px * 0.5
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
   .header-left {
      font-size: 15px; // 30px * 0.5
      margin-left: 10px; // 20px * 0.5
    }
   .header-center {
      font-size: 13.5px; // 27px * 0.5
      font-weight: bolder;
    }
   .header-right {
      margin-right: 10px; // 20px * 0.5
    }
  }
  main {
    width: 100%;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
   .con {
      width: 100%;
      height: 200px; // 400px * 0.5
      margin-top: 25px; // 50px * 0.5
      display: flex;
      justify-content: space-around;
      align-items: center;
     .con-left {
        width: 120px; // 240px * 0.5
        height: 120px; // 240px * 0.5
        background-color: skyblue;
        border-radius: 50%;
       .selected {
          border-radius: 50%;
          border: 1.5px solid aqua; // 3px * 0.5
        }
      }
     .con-right {
        width: 120px; // 240px * 0.5
        height: 120px; // 240px * 0.5
        background-color: pink;
        border-radius: 50%;
       .selected {
          border-radius: 50%;
          border: 1.5px solid aqua; // 3px * 0.5
        }
      }
    }
  }
}

</style>

<template>
  <div class="bigBox">
    <header>
      <div class="header-left">
        <img @click="onClickLeft" src="@/assets/back_black.png" alt="" />
      </div>
      <div class="header-center">
        <p>设置性别</p>
      </div>
      <div class="header-right">
        <van-button
          @click="tz"
          style="width: 100px; height: 50px; border-radius: 12px"
          size="small"
          type="primary"
          >完成</van-button
        >
      </div>
    </header>
    <main>
      <div class="con">
        <div class="condiv-left" @click="selectGender('男')">
          <div class="con-left">
            <img
              style="width: 100%; height: 100%"
              src="@/assets/boy.png"
              alt=""
              :class="{ selected: selectedGender === '男' }"
            />
          </div>
          <br />
          <p style="text-align: center; color: #5acea5">男</p>
        </div>

        <div class="condiv-right" @click="selectGender('女')">
          <div class="con-right">
            <img
              style="width: 100%; height: 100%"
              src="@/assets/girl.png"
              alt="女"
              :class="{ selected: selectedGender === '女' }"
            />
          </div>
          <br />
          <p style="text-align: center; color: #fb99b2">女</p>
        </div>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { defineComponent, ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const UserStore = useUserStore()
const rou = useRoute()
console.log(rou.query)
const router = useRouter()

const tz = () => {
  if (selectedGender.value) {
    ElMessage({
          message: '修改成功',
          type: 'success',
        })
    localStorage.setItem('gender', selectedGender.value)
    console.log('性别已保存到本地')
  }
  router.push('/userchild')
}
// 用于存储选择的性别
const selectedGender = ref<string>('')

// 选择性别方法
const selectGender = (gender: string) => {
  selectedGender.value = gender
}

const onClickLeft = () => history.back()
</script>
